<script setup>
import { ref } from 'vue';
import { Cropper } from 'vue-advanced-cropper';
import 'vue-advanced-cropper/dist/style.css';
import {uploadFile} from "./uploadFile.js";


const props = defineProps({
    aspectRatio: {
        type: Number,
        default: 1
    },
    getUrl: {
        type: String,
        default: ''
    }
});


// 图片源地址
const imageSrc = ref(null);

// 裁剪后的图片数据
const croppedImage = ref(null);

// 裁剪器引用
const cropperRef = ref(null);

// 文件输入引用
const fileInputRef = ref(null);

// 处理文件选择，更新图片源地址
const onFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
        const reader = new FileReader();
        reader.onload = (event) => {
            imageSrc.value = event.target.result;
        };
        reader.readAsDataURL(file);
    }
};

//获取图片的blob数据
const getBlob = ref();

// 裁剪图片并获取结果
const cropImage = () => {
    const { canvas } = cropperRef.value.getResult();
    if (canvas) {
        canvas.toBlob((blob) => {
            getBlob.value = blob;
            const reader = new FileReader();
            reader.onload = (event) => {
                croppedImage.value = event.target.result;
            };
            reader.readAsDataURL(blob);
        }, 'image/jpeg',0.8);
    }
};


const uploadImage = () => {
    uploadFile(getBlob.value, props.getUrl);
    reset();
};

const reset = () => {
    imageSrc.value = null;
    croppedImage.value = null;
    fileInputRef.value.value = '';
};

</script>

<template>
    <div class="container">
        <!-- 文件选择区域 -->
        <div class="top-panel">
            <input
                ref="fileInputRef"
                type="file"
                style="width: auto"
                accept="image/*"
                @change="onFileChange"
                title="选择要裁剪的图片"
            />
        </div>

        <!-- 主内容区域 -->
        <div class="main-content">
            <!-- 左侧裁剪区域 - 始终显示 -->
            <div class="left-panel">
                <div class="cropper-wrapper">
                    <!-- 未上传图片时的提示 -->
                    <div v-if="!imageSrc" class="upload-placeholder">
                        请上传图片
                    </div>

                    <!-- 裁剪器（仅在有图片时显示） -->
                    <cropper
                        v-if="imageSrc"
                        ref="cropperRef"
                        class="cropper"
                        :src="imageSrc"
                        :stencil-props="{ aspectRatio }"
                    />
                </div>
            </div>

            <!-- 右侧预览区域 -->
            <div class="right-panel">
                <div v-if="croppedImage" class="preview-wrapper">
                    <h3 class="seePicture">预览</h3>
                    <img
                        :src="croppedImage"
                        alt="Cropped Image"
                        class="preview-image"
                    />
                </div>
                <div v-else class="preview-placeholder">
                    裁剪后的图片将在此处显示
                </div>
            </div>
        </div>

        <!-- 底部操作按钮 -->
        <div class="bottom-panel">
            <el-button
                v-if="imageSrc"
                @click="cropImage"
                type="primary"
                plain
            >
                裁剪图片
            </el-button>
            <el-button
                v-if="croppedImage"
                @click="uploadImage"
                type="success"
                plain
            >
                提交图片
            </el-button>
        </div>
    </div>
</template>



<style scoped>
.seePicture {
    position: absolute;
    top: -40px;
    text-align: center;
}
.container {
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    max-width: 1200px;
    width: auto;
}

.main-content {
    display: flex;
    gap: 20px;
}

.left-panel, .right-panel {
    flex: 1;
    min-width: 300px;
    min-height: 300px;
}


/* 上传提示样式 */
.upload-placeholder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #888;
    font-size: 16px;
}

/* 裁剪区域样式 - 始终显示 */
.cropper-wrapper {
    height: 300px;
    width: 300px;
    border: 1px solid #ddd;
    border-radius: 4px;
    position: relative;
    background-color: #f8f8f8;
    overflow: hidden;
    padding: 10px;
}

.preview-wrapper, .preview-placeholder {
    position: relative;
    height: 300px;
    width: 300px;
    display: flex;
    flex-direction: column;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
    background-color: #f8f8f8;
}

.cropper {
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.preview-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.preview-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888;
}

.bottom-panel {
    display: flex;
}

input[type="file"] {
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 100%;
}
</style>